COMMENT

It's hard and long to write about this topic. Many people out there talk and write about this topic better than me. I would like to write some words for this.

SSG - STATIC SITE GENERATION

WHY SSG?

• With CSR (Client Side Rendering - SPA), the Client has to render HTML, and it becoming slow if got a big deal.

• Not good for SEO.

• Caching Issue. (**)

• With SSR or Universal, you cannot deploy to a static CDN. (You can use CDN , but cannot deploy to a static CDN).

• The Time-To-First-Byte is a bit slower because the content is generated on the server for each request.

• The server will be busier, can execute fewer request per second.

• HTML doc will be bigger.

• Full page reload after routes change.

There are many technical ways to avoid and handle all the issue above, but in this topic, I just want to share and talk about SSG and SCULLY, what makes it better!

WHAT IS SSG?

SSG (STATIC SITE GENERATION) All the pages are generated at build time as static pages (with some Javascript tricks to load/preload content as fast as possible)

Pros

• Really fast website
• Can deploy to a static CDN
• Security: the attack surface of a static website is minimal.
• Fewer API calls.

Cons

• If content changes frequently, it may become stale
• Need to trigger a rebuild to update content
• If you have a really big website, build time may be very long.
• Fewer API calls

BUT - There are some way to handle cons

• Netlify or Zeit Now provide hooks to trigger a rebuild from a remote app, like a CMS.
• When you have both stable data (for e-commerce: product description, images, etc.) and frequently changing data (stock quantity) you may do an API call on component load to fetch an updated version of just the frequently changing data. Search engines could crawl the stale data, but it’s not a big problem in this case.
• Using this technique, you may also manage authentication and serve a different content to different users

CONCLUDE

Today I'd choose a static site anytime, unless:

• The website is very big (for example a 50K products e-commerce)
• The content changes very frequently and the user needs it up-to-date

JAM STACK

WHAT IS JAM STACK?

_"A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup"_
                                                               Mathias Biilmann (CEO & Co-founder of Netlify).

[J] - Javascript: Dynamic functionalities are handled by JavaScript. There is no restriction on which framework or library you must use. [A] - APIs: Server side operations are abstracted into reusable APIs and accessed over HTTPS with JavaScript. These can be third party services or your custom function. [M] - Markup: Websites are served as static HTML files. These can be generated from source files, such as Markdown, using a Static Site Generator.

WHY IS JAM STACK?

• Faster performance: Serve pre-built markup and assets over a CDN
• More secure: No need to worry about server or database vulnerabilities
• Less expensive: Hosting of static files are cheap or even free.
• Better developer experience: Front end developers can focus on the front end, without being tied to a monolithic architecture. This usually means quicker and more focused development
• Scalability: If your product suddenly goes viral and has many active users, the CDN seamlessly compensates

BEST PRACTICE

• Content delivery network: Since all the markup and assets are pre-built, they can be served via CDN. This provides better performance and easier scalability.
• Atomic deploys: Each deploy is a full snapshot of the site. This helps guarantee a consistent version of the site globally
• Cache invalidation: Once your build is uploaded, the CDN invalidates its cache. This means that your new build is live in an instant.
• Everything in version control: Your codebase lives in Version Control System, such as Git. The main benefits are: change history of every file, collaborators and traceability.
• Automated builds: Your server is notified when a new build is required, typically via webhooks. Server builds the project, updates the CDNs and the site is live.

Develope => Version Control => Automated build => Static assets => Atomic deploy => Pre-render & invalidate cache => Update CDN

SCULLY

“Scully is the best static site generator for Angular projects looking to embrace the Jamstack.”

WHAT IT CAN DO?

• It will use your application and will create a static index.html for each of your pages/routes. Each and every index.html will have the content already there, and this will make your application show instantly for the user. Also, this will make your application very SEO friendly. On top of this, your SPA will still function as it did before.
• Also, we have an easy to use and extend plugins system that will allow you to manipulate routes and content.

HOW DOES IT WORK

1. Traverse, read the source of the application to find all routes.
2. Merge in extraRoutes, where we specify routes we know, but can't automatically traverse
3. We now have a list of unhandled routes
4. Enrich/expand the found unhandled routes routes with router-plugins.
5. Process/change the resulting handled routes list with routeProcess plugins.
6. Write out the scully.routes.json files.
7. Trigger routeDiscoveryDone with results from 5
8. Trigger the render plugins for each route (render will be specified later)
9. Trigger allDone plugins

DEMO

This website is a demo, It's was make by angular and render .md file to create this page at build time by scully! And when you access my site, your browser just display my site, don't need to render it any more.